<template>
	<view class="pagesBox">
		<view style="position: sticky;top: 0%;z-index: 999;overflow: hidden;background-color: #f7f8fa;">
			<my-nav count="AJY新零售" color="#000" :bgImage="`${baseUrl}/static/index/bg01.png`" :isShow="false" :isSwitchTab="true"></my-nav>
		</view>
		<view class="pagesBgImg">
			<image :src="`${baseUrl}/static/index/bg01.png`" mode="widthFix" style="width: 100%;"></image>
			<image :src="`${baseUrl}/static/index/bg02.png`" mode="widthFix" style="width: 100%;" class="image2"></image>
		</view>
		<view class="pagesMain">
			<!-- 轮播图 -->
			<view class="swiperBox">
				<swiper circular autoplay :indicator-dots="false" :style="{height: carouselHeight+'px'}">
					<swiper-item v-for="(item,index) in swiperInfo" :key="index">
						<image :src="item.banner_image" mode="widthFix" style="width:100%;height: 352rpx;border-radius: 12rpx;font-size: 0%;" @load="adaptCarouselHeight"></image>
					</swiper-item>
				</swiper>
			</view>
			<my-notice :notice="notice"></my-notice>
			<my-title title1="热门推荐"></my-title>
			<my-goods :goodsList="goodsList"></my-goods>
			<uni-load-more v-if="total > 0" :status="statusType"></uni-load-more>
			<view style="margin-top: 10rpx;" v-if="total == 0"><u-empty text="暂无推荐" mode="list"></u-empty></view>
			<!-- <view class="menuBox">
				<view class="menuLeft">
					<view class="itemBox" @click="toOrder">
						<image :src="`${baseUrl}/static/index/bg03.png`" style="width: 276rpx;height: 176rpx;"></image>
						<view class="itemBody">
							<view class="itemLeft">
								<view class="leftTop" style="color: #3BC6CC;">新客专区</view>
								<view class="leftText2">优惠不停 惊喜连连</view>
								<view class="arrowRightward"><u-icon name="arrow-rightward" color="#04449E" size="22"></u-icon></view>
							</view>
						</view>
					</view>
				</view>
				<view class="menuRight">
					<view class="rightTop">
						<view class="itemBox" @click="toPointsShop">
							<image :src="`${baseUrl}/static/index/bg04.png`" style="width: 416rpx;height: 176rpx;"></image>
							<view class="itemBody">
								<view class="itemLeft">
									<view class="leftTop" style="color: #3BC6CC;">VIP会员礼包</view>
									<view class="leftText2">自用省钱 分享赚钱</view>
								</view>
								<view class="itemRight"><image :src="`${baseUrl}/static/index/icon01.png`" style="width: 220rpx;height: 176rpx;"></image></view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import { isLogin } from "../../mixins/isLogin.js"
	import { isUpdateNew } from "../../mixins/isUpdateNew.js"
	export default {
		mixins:[isLogin,isUpdateNew],
		data() {
			return {
				baseUrl:this.$baseUrl,
				// 轮播图自适应高度
				carouselHeight:'200',
				// 轮播图信息
				swiperInfo:[],
				notice:"",
				goodsList:[],
				total:-1,
				statusType:'more',
				params:{
					limit:4,
					page:1,
					goods_type:1
				},
			};
		},
		onLoad(options) {
			console.log(this.$baseUrl);
			if(options.uid){
				uni.setStorageSync('shareuid',options.uid)
			}
			this.getGoods()
		},
		onShow() {
			this.updateNew();
			this.getHomeInfo();
			this.getOrderList();
		},
		methods:{
			// 在这里用主要是为了验证token是否过期或是否是登录状态
			async getOrderList(){
				let res = await uni.$http('POST','order/list',{limit:1});
				if(res.msg.includes('登录')){
					uni.removeStorageSync("token");
					this.toLogin();
				}
			},
			async getUserInfo(){
				let res = await uni.$http('POST','user/userInfo');
				console.log("用户信息",res);
				if(res.code == 1){
					// this.isApplyStore = res.data.store.status;
				}
			},
			// 首页信息
			async getHomeInfo(){
				let res = await uni.$http('POST','home/index');
				if(res.code == 1){
					this.swiperInfo = res.data.banner;
					this.notice = res.data.notice.title || '暂无公告';
				}else{
					this.notice = '暂无公告';
				}
			},
			// 获取推荐信息
			async getGoods(){
				let res = await uni.$http('POST','goods/list',this.params);
				console.log("获取推荐信息",res);
				if(res.code == 1){
					this.params.page = res.data.current_page;
					this.total = res.data.total;
					if(this.params.page == 1){
						this.goodsList = res.data.data;
					}else{
						this.goodsList = this.goodsList.concat(res.data.data);
					}
					if(this.goodsList.length < this.total){
						this.statusType = 'more'
					}else{
						this.statusType = 'noMore'
					}
				}else{
					this.total = 0;
				}
			},
			// 适应轮播图高度
			adaptCarouselHeight(e) {
			    let imgWidth = e.detail.width;
			    let imgHeight = e.detail.height;
			    let screenWidth = uni.getSystemInfoSync().screenWidth;
				let px = (screenWidth / 750) * Number(64)
				let rpxNum = Math.floor(px);
				console.log(rpxNum);
			    // let ratio = (screenWidth - screenWidth/750*60) / imgWidth;
			    let ratio = (screenWidth - rpxNum) / imgWidth;
				this.carouselHeight = imgHeight * ratio;
			}
		},
		onReachBottom() {
			if(this.goodsList.length < this.total){
				this.statusType = 'loading';
				this.params.page++;
				this.getGoods()
			}else{
				this.statusType = 'noMore'
			}
		},
		onShareAppMessage(){
			let pages = getCurrentPages()
			let prePage = pages[pages.length - 1];
			return{
				path:`/${prePage.route}`
			}
		},
		onShareTimeline() {
			return{
				query:``
			}
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	.pagesBgImg {
		background-color: transparent;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		.image2{
			position: absolute;
			left: 0%;
			right: 0%;
			bottom: 0%;
		}
	}
	.pagesMain{
		padding: 12rpx 32rpx;
		position: relative;
		.menuBox{
			margin: 24rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.menuLeft{
				height: 336rpx;
			}
			.menuRight{
				height: 336rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.rightBottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
			.itemBox{
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				.itemBody{
					padding: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					.itemLeft{
						display: flex;
						flex-direction: column;
						.leftTop{
							font-weight: 600;
							font-size: 32rpx;
							color: #1F3650;
							// margin-bottom: 2rpx;
							letter-spacing: 4rpx;
						}
						.leftText2{
							font-weight: 400;
							font-size: 22rpx;
							color: #778E97;
							letter-spacing: 2rpx;
						}
						.arrowRightward{
							width: 64rpx;
							height: 32rpx;
							background: #FFFFFF;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							margin-top: 16rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
					.itemRight{
						display: flex;
						justify-content: flex-end;
						align-items: center;
						position: absolute;
						bottom: 0%;
						right: 0%;
					}
				}
			}
		}
	}
}
</style>
<style>
	page{
		background-color: #f7f8fa;
	}
</style>